// 定义一个轮播图类
class Carousel {
    constructor(tag) {
        // 获取目标元素
        this.tag = document.querySelector(tag);
        // 获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        // 获取li列表
        this.list = this.tag.querySelectorAll(".img_box > ul > li");
        // 获取所有li要移动的类名
        this.listClassName = ["list01", "list02", "list03", "list04"];
        //barlist
        this.barList = this.tag.querySelectorAll(".dot_box>span")
        // 触发绑定事件
        // console.log(this.barList);
        this.eventFn();
        this.barFn();
        // 初始化变量
        this.index = 0;
        // 获取上一个初始化变量值
        this.lastIndex = 0;
        this.timer;
    };
    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx]; 
        });
    };

    // 点击右按钮
    eventFn() {
        this.rBtn.addEventListener("click", () => {
            // 操作数组
            // 添加数组最后一个值到第一张
            this.listClassName.unshift(this.listClassName[this.listClassName.length-1]);
            // 删除数字的第一个值
            this.listClassName.pop();
            // li全部重新设置类名
            this.restListFn();

            this.lastIndex= this.index;
            if (this.index<3){
                this.index++;
            }else{
                this.index=0;
            }
            this.barFn();
        });

        this.lBtn.addEventListener("click", () => {
            this.listClassName.push(this.listClassName[0]);
            // 删除数字的第一个值
            this.listClassName.shift();
            // li全部重新设置类名
            this.restListFn();
        });
    }

    //小圆点
    barFn() {
        this.barList.forEach((el, idx) => {
            el.addEventListener("click",()=>{
                this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
                this.listClassName.pop();
                this.restListFn();
                this.lastIndex=this.index;
                this.barColorFn();
                
            })
        });
    };

    barColorFn(){
        this.span[this.lastIndex].classList.remove("dot_active");
        this.span[this.index].classList.add("dot_active");
    }

    
    
}